<div id="top-panel">
    <div id="panel">
        <ul>
            <li><a href="<?php echo site_url("ads"); ?>" class="report_seo">List</a></li>			
        </ul>
    </div>
</div>
<script language="javascript">
	
	// json object for kiosk list
	var str_kiosk = '<?php echo $kiosk_json; ?>';
	var obj_kiosk = JSON.parse(str_kiosk);
	
	// json kiosk assigned object
	var str_assigned = '<?php echo isset($kiosk_assign_json) ? $kiosk_assign_json : '[]'; ?>';
	var obj_assigned = JSON.parse(str_assigned);
	
	var jq = jQuery.noConflict();
	jq(document).ready(function(){
		jq(function(){
			jq( "#start_date" ).datepicker({
				altField: "#alternate",
				altFormat: "DD, d MM, yy"
			});
			jq( "#end_date" ).datepicker({
				altField: "#alternate",
				altFormat: "DD, d MM, yy"
			});
		});		
	
		jq(".bt1").click(function(){
				var arr = [];
				jq("#kiosk option:selected").each(function(){
					arr.push({'id' : jq(this).val(), 'mac_address' : jq(this).text()});
				});
				add_assigned(1, arr);
				remove_assigned(1, arr);
				update_assigned_list();
				update_kiosk_list();
		});	
		
		jq(".bt2").click(function(){
				var arr = [];
				jq("#kiosk_id option:selected").each(function(){
					arr.push({'id' : jq(this).val(), 'mac_address' : jq(this).text()});
				});
				add_assigned(2, arr);
				remove_assigned(2, arr);
				update_assigned_list();
				update_kiosk_list();
		});	
		
		update_kiosk_list();
		update_assigned_list();
		
	});
	
	function add_assigned(type, obj){
		if(obj.length>0){
			if(type==1){
				for(var j=0; j<obj.length; j++){
						obj_assigned.push(obj[j]);
				}
			}
			else{
				for(var j=0; j<obj.length; j++){
						obj_kiosk.push(obj[j]);
				}
			}			
		}
	}
	
	function remove_assigned(type, obj){
		var new_obj = [];
		if(obj.length > 0){
			if(type==1){
				for(var i=0; i<obj_kiosk.length; i++){
					var flag = true;
					for(var j=0; j<obj.length; j++){
						if(obj_kiosk[i].id == obj[j].id) flag = false;
					}
					if(flag==true) new_obj.push(obj_kiosk[i]);
				}
				obj_kiosk = new_obj;				
			}
			else{
				for(var i=0; i<obj_assigned.length; i++){
					var flag = true;
					for(var j=0; j<obj.length; j++){
						if(obj_assigned[i].id == obj[j].id) flag = false;
					}
					if(flag==true) new_obj.push(obj_assigned[i]);
				}
				obj_assigned = new_obj;				
			}
		}
	}
	
	function update_kiosk_list(){
		jq("#kiosk option").remove();	
		if(obj_kiosk.length > 0){
			
			for(var i=0; i<obj_kiosk.length; i++){
				var str = '<option value="'+obj_kiosk[i].id+'">'+obj_kiosk[i].mac_address+'</option>';
				jq("#kiosk").append(str);
			}
		}			
	}
	
	function update_assigned_list(){
		jq("#kiosk_id option").remove();
		if(obj_assigned.length > 0){
			
			for(var i=0; i<obj_assigned.length; i++){					
					var str = '<option value="'+obj_assigned[i].id+'" selected="selected">'+obj_assigned[i].mac_address+'</option>';
					jq("#kiosk_id").append(str);
			}
		}
	}
</script>
<div id="wrapper">
	<div id="content">
		<div id="rightnow">
			<h3 class="reallynow">New Item</h3>
			<div>
				<?php echo validation_errors(); ?>
			</div>
			<?php echo form_open('ads/save_assign') ?>
			<input type="hidden" name="id" value="<?php echo isset($ads_assign['id']) ? $ads_assign['id'] : '' ; ?>" />
			<input type="hidden" name="ads_id" value="<?php echo $ads_id; ?>" />
			<table width="100%">
				<tr>
					<td>Ad text</td>
					<td>
						<?php echo $ads['ad_text']; ?>
					</td>
				</tr>	
				<tr>
					<td>KIOSK</td>
					<td>
						<div style="float:left;" >
							<select name="kiosk" size="5" multiple="multiple" id="kiosk"  class="input1">		
							</select>
						</div>
						
						<div style="float:left;margin:5px;">
							<input type="button" class="bt1" value="&gt;" /><br />
							<input type="button" class="bt2" value="&lt;" />							
						</div>
						
						<div style="float:left;">
							<select name="kiosk_id[]" size="5" multiple="multiple" id="kiosk_id" class="input1">
							</select>
						</div>
						<div style="clear:both;"></div>
					</td>
				</tr>
				<tr>
					<td>Start Date</td>
					<td><input type="text" name="start_date" id="start_date" class="input" value="<?php echo isset($start_date) ? $start_date : '';  ?>" />
						<select name="start_h" >
							<?php foreach($h as $v): ?>
								<option value="<?php echo $v;?>"><?php echo $v;?></option>
							<?php endforeach; ?>
						</select>:
						<select name="start_i" >
							<?php foreach($i as $v): ?>
								<option value="<?php echo $v;?>"><?php echo $v;?></option>
							<?php endforeach; ?>
						</select>:
						<select name="start_s" >
							<?php foreach($s as $v): ?>
								<option value="<?php echo $v;?>"><?php echo $v;?></option>
							<?php endforeach; ?>
						</select>
					</td>
				</tr>
				<tr>
					<td>End Date</td>
					<td><input type="text" name="end_date" id="end_date" class="input" value="<?php echo isset($start_date) ? $start_date : '';  ?>" />
						<select name="end_h" >
							<?php foreach($h as $v): ?>
								<option value="<?php echo $v;?>"><?php echo $v;?></option>
							<?php endforeach; ?>
						</select>:
						<select name="end_i" >
							<?php foreach($i as $v): ?>
								<option value="<?php echo $v;?>"><?php echo $v;?></option>
							<?php endforeach; ?>
						</select>:
						<select name="end_s" >
							<?php foreach($s as $v): ?>
								<option value="<?php echo $v;?>"><?php echo $v;?></option>
							<?php endforeach; ?>
						</select>
					</td>
				</tr>
				<tr>
					<td>Status</td>
					<td>
						<input type="radio" name="status" value="1" checked="checked" />Active
						<input type="radio" name="status" value="0" />UnActive
					</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td><input type="submit" value="Save" >
						<input type="button" value="Cancel" class="btcancel" /></td>
				<tr>
			</table>
		</div>
	</div>
</div>